import React from "react";
import eventBus from "./utils/eventBus";

class Hello extends React.Component {
  // constructor(props) {
  //   super(props);

  //   // 初始化state
  //   // 提前 this 的bind
  // }

  state = {};

  handleScroll = () => {
    console.log("scroll");
  };

  handleAbcd = () => {
    console.log("Hello abcd 被触发了");
  };

  render() {
    // const { dobuleAge } = this.state;

    //  需求：收到一个 props.age 。想要基于它 得到一份 dobuleAge
    const dobuleAge = this.props.age * 2;
    return (
      <div>
        <h4 ref="myH4">Hello - {dobuleAge}</h4>
      </div>
    );
  }

  /**
   * 组件挂载完成
   */
  componentDidMount() {
    console.log("Hello componentDidMount");

    // 获取真实DOM
    // console.log(this.refs.myH4);

    // 全局事件绑定
    window.addEventListener("scroll", this.handleScroll);

    // 计时器与定时器
    this.timer = setInterval(() => {
      console.log("111");
    }, 1000);

    // 消息订阅
    eventBus.on("abcd", this.handleAbcd);
  }

  /**
   * 组件将要卸载
   *    做收尾工作，全局事件绑定、setInterval、消息订阅
   */
  componentWillUnmount() {
    console.log("Hello componentWillUnmount");

    window.removeEventListener("scroll", this.handleScroll);

    clearInterval(this.timer);

    /**
     * 取消消息订阅
     *  off(eventName, [handle])
     *    1. eventName - 要取消的事件名字
     *    2. handle    - 对应的处理函数，如果不传递该参数，则会将所有的 eventName 都给取消。
     *                    一般建议加上第二个参数。类似于 removeEventListener
     */
    eventBus.off("abcd", this.handleAbcd);
  }

  /**
   * 基于 props 于 state 得到一份 派生(衍生)的 state
   * @param {*} props 当前的 props
   * @param {*} state 当前的 state
   * @returns
   *    1. null
   *    2. {}     该对象会合并到 state 上
   *
   */
  // static getDerivedStateFromProps(props, state) {
  //   console.log("getDerivedStateFromProps - props", props);
  //   console.log("getDerivedStateFromProps - state", state);
  //   // return null;

  //   //  需求：收到一个 props.age 。想要基于它 得到一份 dobuleAge
  //   return {
  //     dobuleAge: props.age * 2,
  //   };
  // }
}

export default Hello;
